<template>
  <!-- 修改基础信息 -->
  <el-dialog
    title="终止租入合同"
    :visible.sync="earlyChangePact"
    width="50%"
    class="pactDialog"
    close="close"
    :before-close="closePopUp"
  >
    <el-form ref="earlyPact" label-width="80px" :model="earlyPact" :rules="pactDataRules" :inline="true" label-position="left">
      <el-form-item label="合同编号" prop="roleName" class="widthPadding">
        <el-input v-model="earlyPact.contractId" size="medium" disabled />
      </el-form-item>
      <el-form-item label="终止原因" prop="roleKey" class="widthPadding">
        <el-input v-model="earlyPact.stopContract" size="medium"/>
      </el-form-item>
      <el-form-item label="是否有押金" label-width="100px" class="widthPadding">
        <el-radio v-model="earlyPact.isDeposit" :label="1" disabled>是</el-radio>
        <el-radio v-model="earlyPact.isDeposit" :label="2" disabled>否</el-radio>
      </el-form-item>
      <el-form-item label="押金金额" class="widthPadding">
        <el-input v-model="earlyPact.depositMoney" size="medium" disabled/>
      </el-form-item>
      <el-form-item label="是否有违约金" label-width="120px" class="widthPadding">
        <el-radio v-model="earlyPact.isDdit" :label="1" disabled>是</el-radio>
        <el-radio v-model="earlyPact.isDdit" :label="2" disabled>否</el-radio>
      </el-form-item>
      <el-form-item label="违约金额" prop="roleKey" label-width="100px" class="widthPadding">
        <el-input v-model="earlyPact.falsifyMoney" size="medium" placeholder="请输入出租人"/>
      </el-form-item>
      <el-form-item label="违约金支付日期" label-width="120px" class="widthPadding">
        <div class="block">
          <el-date-picker
            v-model="earlyPact.falsifyPayTime"
            type="date"
            size="medium"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="终止生效时间" label-width="110px" class="widthPadding">
        <div class="block">
          <el-date-picker
            v-model="earlyPact.storeOpeningTime"
            type="date"
            size="medium"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="押金收回日期" label-width="110px" class="widthPadding">
        <div class="block">
          <el-date-picker
            v-model="earlyPact.depositPaymentTime"
            type="date"
            size="medium"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="early(1)">保存草稿</el-button>
        <el-button type="primary" size="small" @click="early(3)">提交终止</el-button>
        <el-button size="small" @click="closePopUp">取 消</el-button>
      </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['earlyChangePact', 'earlyPact'],
  data() {
    return {
      // 验证规则
      pactDataRules: {
        roleKey: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交终止 / 保存草稿
    early(i) {
      this.$emit('early', i)
    },
    // 取消
    closePopUp() {
      this.$emit('earlyClose')
    }
  }
}
</script>

<style scoped>
.widthPadding{
  padding: 0px 30px;
}
</style>
